<script setup>
import { reactive } from 'vue'
import { AntDesignOutlined } from '@ant-design/icons-vue'
const app = reactive({
  id: '1',
  name: '开发者用户名',
  aappID: 6251548,
  userID: 6251548,
  status: '审核中',
  number: '80527996@qq.com',
  benbn: '1.2.0',
  title: 'com.jsljk.apk',
  type: '个人',
  createTime: '2023/5/31 15:49:54',
  size: '52.35M',
  description:
    '① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验',
  icon: 'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  sort: '冒险、益智、休闲、宠物',
  Language: '中文',
  introduce: '一场拥抱自由和温暖的云端之旅',
  age: '12+',
  intor:
    '时隔多年再度回归，开启一场难忘的社交冒险体验，在晴空与云海之中与翱翔的追梦者相遇。+',
  bannerList: [
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  ],
  urls: [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  ],
  videoTitle: '一场拥抱自由和温暖的云端之旅',
  videoUrl:
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  videoFile:
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
})
</script>

<template>
  <div class="app-container">
    <a-row>
      <a-col flex="auto">
        <a-card
          class="border-radius0"
          :bordered="false"
          bodyStyle="padding:0 24px 12px"
          title="基础信息"
        >
          <!-- <template #title>
            <header class="titleHeader">
              <div class="titleLeft">基础信息</div>
            </header>
          </template> -->
          <div class="content">
            <div v-if="app">
              <a-row justify="center" algin="middle">
                <!-- style="margin-bottom: 14px; padding: 8px" -->
                <a-col flex="70px">
                  <a target="_blank" :href="app.icon">
                    <img
                      :src="app.icon"
                      style="
                        display: block;
                        width: 100%;
                        height: 70px;
                        vertical-align: middle;
                        border-radius: 12px;
                      "
                    />
                  </a>
                </a-col>
                <a-col flex="auto" class="basic_info_box">
                  <div class="lt">
                    <span style="font-weight: bold; color: #3c3c3c"
                      >开发者: {{ app.name }}</span
                    >
                    <span>UserID: {{ app.userID }}</span>
                    <span
                      >游戏状态:
                      <a-tag type="primary" color="warning" :bordered="false">{{
                        app.status
                      }}</a-tag></span
                    >
                  </div>
                  <div class="rt">
                    <span>开发者账号: {{ app.benbn }}</span>
                    <span>开发者类型: {{ app.type }}</span>
                    <span>创建时间: {{ app.createTime }}</span>
                  </div>
                </a-col>
                <a-col flex="70px" class="box_center">
                  <a-button type="primary" style="width: 100%">
                    编辑资料
                  </a-button>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
        <a-card class="border-radius0">33 </a-card>
      </a-col>
      <a-col flex="204px">
        <a-card class="border-radius0 box" :background-color="themeColors">
          <div class="box_avatar">
            <!-- <a-avatar :size="{ xs: 24, xl: 80 }">
              <template #icon>
                <AntDesignOutlined />
              </template>
            </a-avatar> -->
            <a target="_blank" :href="app.icon">
              <img
                :src="app.icon"
                style="
                  display: block;
                  width: 100%;
                  height: 70px;
                  vertical-align: middle;
                  border-radius: 12px;
                "
              />
            </a>
            <span>{{ app.name }}</span>
            <span class="box_avatar_qq">企业/个人账号：{{ app.number }}</span>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  width: 100%;
  // padding: 15px;
  background: #ececec;
}
.border-radius0 {
  border-radius: 0 !important;
}
.box-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
  // .titleHeader {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   font-family: PingFang SC, PingFang SC;
  //   font-weight: 400;
  //   font-size: 16px;
  //   color: #3c3c3c;
  //   line-height: 24px;
  //   margin-top: 14px;
  //   text-align: left;
  //   .titleLeft {
  //     font-weight: bold;
  //   }
  // }
}

.box_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.basic_info_box {
  display: flex;
  align-items: center;
  color: #6e6e6e;
  .lt {
    margin-left: 12px;
    width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .rt {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.box {
  // background-color: #4cc87e;
  background-color: #4cc87e;
}
.box_avatar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // background-color: #4cc87e;
  .box_avatar_qq {
    font-size: 12px;
  }
}
</style>
